<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrap{
            margin:auto;
            border:1px solid red;
        }
        #wrap ul{
            width:1200px;
            height:360px;
        }
        #wrap ul li{
            list-style: none;
            float:left;
            margin-left:10px;
            position: relative;
            overflow: hidden;
        }
        #wrap ul li img{
            display: block;
        }
        #wrap ul li .cover{
            width:230px;
            height:360px;
            background:url(img/new-bg.png);
            position: absolute;
            top:0;
            left:230px;
        }
        #wrap ul li .cover p{
            color:#fff;
            font-size:16px;
            font-family: "微软雅黑";
            text-align: center;

        }
        #wrap ul li .cover .p1{
            margin-top:160px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <ul>
        <li><img src="img/1.jpg" alt=""/>
            <div class="cover">
                <p class="p1">春夏新品 上新无限</p>
                <p>点击进入</p>
            </div>
        </li>
        <li><img src="img/2.jpg" alt=""/>
            <div class="cover">
                <p class="p1">春夏新品 上新无限</p>
                <p>点击进入</p>
            </div>
        </li>
        <li><img src="img/3.jpg" alt=""/>
            <div class="cover">
                <p class="p1">春夏新品 上新无限</p>
                <p>点击进入</p>
            </div>

        </li>
        <li><img src="img/4.jpg" alt=""/>
            <div class="cover">
                <p class="p1">春夏新品 上新无限</p>

                <p>点击进入</p>
            </div>
        </li>
        <li><img src="img/5.jpg" alt=""/>
            <div class="cover">
                <p class="p1">春夏新品 上新无限</p>
                <p><点击进入</p>
            </div>
        </li>
    </ul>
</div>

<script src="js/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
    (function(){

        var $li = $('#wrap ul li');

        $li.hover(function(ev){

            move.call(this , ev , true);

        },function(ev){
            move.call(this , ev , false);
        });


        function move( ev , bool ){
            var top = $(this).offset().top;
            var bottom  = top + $(this).height();
            var left = $(this).offset().left;
            var right = left + $(this).width();

            var x = ev.pageX,
                    y = ev.pageY;

            var sT = Math.abs(y - top),
                    sB = Math.abs(y - bottom),
                    sL = Math.abs(x - left),
                    sR = Math.abs(x - right);

            var a = Math.min( sT , sB , sL , sR );

            switch ( a )
            {
                case sT:
                    if ( bool )
                    {
                        $(this).find('.cover').css({
                            left : 0,
                            top : '-360px'
                        }).stop().animate({
                            top : 0
                        },200);
                    }
                    else
                    {
                        $(this).find('.cover').stop().animate({
                            top : '-360px'
                        },200);
                    }

                    break;

                case sB:
                    if ( bool )
                    {
                        $(this).find('.cover').css({
                            left : 0,
                            top : '360px'
                        }).stop().animate({
                            top : 0
                        },200);
                    }
                    else
                    {
                        $(this).find('.cover').stop().animate({
                            top : '360px'
                        },200);
                    }
                    break;

                case sL:

                    if ( bool )
                    {
                        $(this).find('.cover').css({
                            top : 0,
                            left : '-230px'
                        }).stop().animate({
                            left : 0
                        },200);
                    }
                    else
                    {
                        $(this).find('.cover').stop().animate({
                            left : '-230px'
                        },200);
                    }

                    break;

                case sR:
                    if ( bool )
                    {
                        $(this).find('.cover').css({
                            top : 0,
                            left : '230px'
                        }).stop().animate({
                            left : 0
                        },200);
                    }
                    else
                    {
                        $(this).find('.cover').stop().animate({
                            left : '230px'
                        },200);
                    }
                    break;
            }

            //console.log( '距离顶部:'+sT+'   距离底部:'+sB+'   距离左边:'+sL+'   距离右边:'+sR )
        };

    })();
</script>

</body>
</html>